<template>
  <div class="home-page">
    <!-- 新增轮播图部分 -->
    <section class="features-section">
      <el-carousel :interval="5000" indicator-position="outside" arrow="hover" height="30vh" :autoplay="true">
        <el-carousel-item v-for="(feature, index) in features" :key="index">
          <div class="feature-item">
            <img :src="feature.image" alt="功能图片"/>
            <p class="feature-description">{{ feature.name }}</p>
          </div>
        </el-carousel-item>
      </el-carousel>
    </section>
    <section class="map-news-summary">
      <div class="map-summary">
        <h4>农业虫害预警</h4>
        <el-table :data="tableData" style="width: 100%" size="small">
          <el-table-column prop="regionName" label="区域名称" width="80" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column label="虫害类型（程度）" width="120" :show-overflow-tooltip="true">
            <template v-slot="{ row }">
              {{ row.disasterType }}（{{ row.disasterLevel }}）
            </template>
          </el-table-column>
          <el-table-column prop="dateTime" label="发布时间" width="150" :show-overflow-tooltip="true"></el-table-column>
        </el-table>
      </div>
      <div class="news-summary">
        <h4>最新新闻摘要</h4>
        <ul>
          <li v-for="news in newsSummaries" :key="news.id">
            <el-link type="primary" @click="goToPage(news.link)">{{ news.title }}</el-link>
          </li>
        </ul>
        <!-- 添加智能 AI 问答按钮 -->
        <div class="ai-button-container">
          <el-button type="primary" @click="goToChatPage">智能 AI 问答</el-button>
        </div>
      </div>
    </section>
    <!-- 引入 BottomNav 组件 -->
    <BottomNav/>
  </div>
</template>

<script>
import BottomNav from '@/views/BottomNav.vue';

export default {
  name: "Home",
  components: {
    BottomNav // 注册 BottomNav 组件
  },
  data() {
    return {
      features: [
        { image: '/src/assets/images/start-page/tupian1.png',name:'空天一体化管理体系'},
        { image: '/src/assets/images/start-page/R-C.jpg',name:'智慧农业物联网云平台'},
        { image: '/src/assets/images/start-page/R-C4.jpg',name:'为农场管理装上“数字”大脑' },
        { image: '/src/assets/images/start-page/R-C5.jpg' ,name:'智慧农业创新赋能新质生产力'},
        { image: '/src/assets/images/start-page/R-C6.jpg',name:'掌上全面感知农场信息' },
        { image: '/src/assets/images/start-page/R-C3.jpg',name:'智能应用实现农场数据监测管理' }
      ],
      newsSummaries: [
        { id: 1, title: '新闻1：全国大部分产区苹果花期较常年提前', link: '/news/1' },
        { id: 2, title: '新闻2：一季度粮食进口有望明显减少', link: '/news/2' },
        { id: 3, title: '新闻3：“智慧农业关键技术集成与应用系列...', link: '/news/3'},
        { id: 4, title: '新闻4：农业补贴政策调整引发广泛关注', link: '/news/4'},
        { id: 5, title: '新闻5：新型肥料技术助力作物生长', link: '/news/5'},
        { id: 6, title: '新闻6：农业保险保障农户利益', link: '/news/6'},
        { id: 7, title: '新闻7：绿色农业发展论坛举办', link: '/news/7'},
        
      ],
      tableData: [
        { regionName: '农田A', disasterType: '蝗虫', disasterLevel: '低', dateTime: '2025-02-26 23:21:40' },
        { regionName: '农田B', disasterType: '白粉虱', disasterLevel: '低', dateTime: '2025-05-12 09:23:26' },
        { regionName: '农田C', disasterType: '蚜虫', disasterLevel: '低', dateTime: '2025-4-16 21:02:02' }
      ]
    };
  },
  methods: {
    goToPage(path) {
      this.$router.push(path);
    },
    goToChatPage() {
      this.$router.push('/chat');
    }
  }
};
</script>

<style scoped>
.home-page {
  font-family: sans-serif;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0 10px;
  min-height: 100vh;
  position: relative;
  z-index: 1;
}

.features-section {
  margin: 0;
}

.feature-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 30vh; 
  position: relative;
}

.feature-item img {
  width: 100%;
  height: 100%;
  max-height:30vh;
  object-fit: cover;
  display:block;
}

.feature-description {
  margin-top: 8px;
  font-size: 14px;
  font-weight: bold;
  color: #333;
  text-align: center;
  line-height: 1.4;
}

.map-news-summary {
  display: flex;
  flex-direction: column;
  padding: 7px;
  gap: 8px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  margin: 15px 0;
  flex: 1; /* 确保聊天组件可以占据剩余空间 */
}

.map-summary h4, .news-summary h4 {
  font-size: 14px;
  margin-bottom: 3px;
}

.news-summary ul {
  list-style: none;
  padding: 0;
}

.news-summary li {
  margin-bottom: 2px;
}

.ai-button-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}



.el-carousel__arrow {
  background-color: rgba(0, 0, 0, 0.5); /* 黑底白字更醒目 */
  color: white;
  font-size: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease;
}

/* 鼠标悬停时增强效果 */
.el-carousel__arrow:hover {
  background-color: rgba(0, 0, 0, 0.8);
  color: #fff;
}
</style>
